<!-- 我的相册 -->
<template>
  <div id="MyPhoto">
    <!-- 头部 -->
    <Head BackType1="1" :NoticeType5="show&&Delbuttom" :NoticeType6="!Delbuttom" v-on:DelClick="DelClick" v-on:cancelClick="cancelClick" title="我的相册"></Head>
    <div id="MyPhotoMain">
      <div class="HasMyPhoto" v-show="show">
        <div class="MyPhotoList">
          <van-checkbox-group class="MyPhotoBox" v-model="result" v-for="(item,index) in list" :key="index">
            <img :src="item.src" alt="">
            <!-- <div class="mask"></div> -->
            <van-checkbox ref="checkboxes" v-show="!Delbuttom" @click="resultlist(item.name)" :name="item.name" class="checkList"></van-checkbox>
          </van-checkbox-group>
          <div class="MyPhotoBox">
            <van-uploader name="uploader" :after-read="onRead">
              <img @click="AddPhoto()" v-show="hasAddPhoto" src="@/assets/img/addIcon.png" alt="">
            </van-uploader>
          </div>
        </div>
        <div class="ButtomDel" v-show="hasDelphoto">
          <van-button class="DelButtom" @click="DelPhoto()" type="danger">删除</van-button>
        </div>
      </div>
      <div class="NoMyPhoto" v-show="!show">
        <img src="@/assets/img/UpPhoto.png" alt="">
        <div class="NoMyPhotoTip">其他人可以通过你的详细资料，查看你添加的相片。</div>
        <van-uploader name="uploader" :after-read="onRead">
          <van-button class="NoMyPhotoButtom" type="info">立即添加</van-button>
        </van-uploader>
      </div>
    </div>
  </div>
</template>

<script>
  import Head from "../components/Head"
  /* Uploader:上传，Button:按钮，Checkbox,CheckboxGroup：复选框，Dialog:确定取消弹出层 */
  import {Uploader,Button, Checkbox, CheckboxGroup,Dialog } from 'vant';
  export default{
    data(){
      return{
        show:true,//有照片的时候
        Delbuttom:true,//显示删除按钮
        hasDelphoto:false,//底部删除按钮是否显示
        hasAddPhoto:true,//添加相片
        list:[],
        result:[],
        indexs:[],
        isActive:'',
      }
    },
    components:{
      Head,
      [Button.name]:Button,
      [Uploader.name]:Uploader,
      [Checkbox.name]:Checkbox,
      [CheckboxGroup.name]:CheckboxGroup,
      [Dialog.name]:Dialog
    },
    mounted(){
      /**
      * 获取我的相册列表
      */
      this.$get(urlConfig.memberInfo)
        .then(res => {
        console.log(res);
        if(res.data.myPhoto.length == 0){
          this.show = false;
        }else{
          var obj = res.data.myPhoto;
          var keys=[];//定义一个数组用来接受key  
          var values=[];//定义一个数组用来接受value  
          for(var key in obj){  
            keys.push(key);
            values.push(obj[key]);//取得value
          }
          for(let i=0; i<keys.length; i++){
            this.list.push({"src":values[i],"name":keys[i]})
          }
          console.log(this.list)
          if(this.list.length == 4){
            this.hasAddPhoto = false;
          }
        }
      })
    },
    methods: {
      //选择的时候产生的数据
      resultlist(item){
        console.log(item)
      },
      //点击上传图片的按钮
      onRead(item) {
        // 点击图片上传完成，获取file对象列表
        var file = item.content
        /**
        * 图片上传获取后台img
        */
        var avatartext={
          pic:file,
        }
        console.log(avatartext)
        this.$post(urlConfig.imageUpload,avatartext)
          .then(res => {
          console.log(res);
          let MyHeadImg = res.data.url[0]
          /**
          * 上传图片
          */
          var HeadImg={
            myPhoto:MyHeadImg
          }
          console.log(HeadImg)
          this.$post(urlConfig.myPhoto,HeadImg)
            .then(res => {
            console.log(res);
            if(this.list==''){
              this.show = true
            }
            this.list.push({"src":urlConfig.BaseUrl+res.data.url,"name":parseInt(res.data.key)})
            if(this.list.length == 4){
              this.hasAddPhoto = false;
            }
          })
        })
      },
      // 删除
      DelClick(){
        this.result=[]
        this.hasDelphoto = true;
        this.Delbuttom = false;
        this.hasAddPhoto = false;
      },
      // 取消
      cancelClick(){
        this.hasDelphoto = false;
        this.Delbuttom = true;
        if(this.list.length!=4){
          this.hasAddPhoto = true;
        }
      },
      // 点击删除按钮，进行图片删除
      DelPhoto(){
        // for(var b=0; b<this.result.length; b++){
        //   let resultlist = this.result[b]
        //   for(var a=0; a<this.list.length; a++){
        //     if(resultlist == this.list[a].name){
        //       console.log(a)
              
        //       this.list.shift(this.list[a])
        //       console.log(this.list)
        //     }
        //   }
        // }
        if(this.result==''){
          Dialog.alert({
            title:'提示',
            message: '你还没有选择要删除的图片'
          }).then(() => {
          })
        }else{
          Dialog.confirm({
            title:'提示',
            message: '确定删除该图片吗？'
          }).then(() => {
            let id = {
              id:this.result
            }
              console.log(id)

            /**
            * 删除我的相册的列表
            */
            this.$post(urlConfig.delMyPhoto,id)
              .then(res => {
              console.log(res);
              if(res.code==200){
                location.reload()
              }
            })
          }).catch(() => {
            console.log('取消成功')
          });
        }
      }
    }
  }
</script>

<style scoped lang="less">
  #MyPhoto{
    #MyPhotoMain{
      position: fixed;
      top: 88px;
      z-index: 10;
      .HasMyPhoto{
        width: 740px;
        padding: 8px 5px;
        .MyPhotoList{
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;

          .MyPhotoBox{
            position: relative;
            width: 24%;
            margin: 0.5%;
            img{
              height: 179px;
              width: 100%;
              border-radius: 10px;
            }
            .mask{
              position: absolute;
              top: 0;
              left: 0;
              height: 179px;
              width: 100%;
              background: #333;
              opacity: 0.1;
              border-radius: 10px;
            }
            .checkList{
              background: #aaa;
              border-radius: 50%;
              position: absolute;
              left: 10px;
              top: 10px;
            }
          }
        }
        .ButtomDel{
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 88px;
          .DelButtom{
            width: 100%;
            height: 88px;
          }
        }
      }
      .NoMyPhoto{
        width: 690px;
        padding: 0 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        img{
          height: 157px;
          width: 200px;
          margin: 150px auto 100px;
      }
        .NoMyPhotoTip{
          font-size: 28px;
          line-height: 40px;
          color: #888;
          width: 600px;
          text-align: center;
        }
        .NoMyPhotoButtom{
          width: 690px;
          height: 88px;
          margin-top: 90px;
          background: #677CE9;
        }
      }
    }
  }
</style>